<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>母校行管理员系统 - 总结审核</title>
  <!-- 引入外部资源 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入共用样式 -->
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="app" class="container">
  <!-- 顶部栏 -->
  <header class="header">
    <div class="header-content">
      <div class="system-title">
        <i class="fa fa-graduation-cap"></i>
        <span>母校行活动管理系统</span>
      </div>
      <div class="user-info">
        <span>CAOYUWEI（招办管理员）</span>
        <a href="../portal.html" class="return-portal">
          <i class="fa fa-home"></i>
          <span>返回门户</span>
        </a>
      </div>
    </div>
  </header>

  <!-- 面包屑导航 -->
  <div class="breadcrumb">
    <a href="index.html">首页</a>
    <i class="fa fa-angle-right"></i>
    <span>母校行总结审核</span>
  </div>

  <!-- 主内容区容器 -->
  <div class="main-container">
    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <nav class="nav-menu">
        <a href="index.html" class="nav-item">
          <i class="fa fa-tasks"></i>
          <span>母校行队伍管理</span>
        </a>
        <a href="summary-review.html" class="nav-item active">
          <i class="fa fa-file-text-o"></i>
          <span>总结审核</span>
        </a>
        <a href="team-review.html" class="nav-item">
          <i class="fa fa-check-square-o"></i>
          <span>队伍审核</span>
        </a>
        <a href="material-status.html" class="nav-item">
          <i class="fa fa-upload"></i>
          <span>队伍上传材料情况</span>
        </a>
        <a href="activity-batches.html" class="nav-item">
          <i class="fa fa-calendar"></i>
          <span>母校行活动批次</span>
        </a>
      </nav>
    </aside>

    <!-- 右侧内容区域 -->
    <main class="content">
      <div class="content-header">
        <h1>母校行总结审核</h1>
        <button class="btn btn-export">
          <i class="fa fa-download"></i>
          <span>导出数据</span>
        </button>
      </div>

      <!-- 筛选面板 -->
      <div class="filter-panel">
        <div class="filter-item">
          <label for="batch">活动批次：</label>
          <select id="batch" v-model="selectedBatch" class="form-select">
            <option value="">全部批次</option>
            <option value="秋季批次">母校行活动秋季批次</option>
            <option value="春季批次">母校行活动春季批次</option>
            <option value="夏季批次">母校行活动夏季批次</option>
          </select>
        </div>
        <div class="filter-item">
          <label for="status">审核状态：</label>
          <select id="status" v-model="selectedStatus" class="form-select">
            <option value="">全部状态</option>
            <option value="pending">待审核</option>
            <option value="approved">审核通过</option>
            <option value="rejected">审核驳回</option>
          </select>
        </div>
        <div class="filter-item">
          <label for="highSchool">中学名称：</label>
          <input type="text" id="highSchool" v-model="schoolName"
                 placeholder="请输入中学名称" class="form-input">
        </div>
        <div class="filter-item" style="margin-left: auto;">
          <button class="btn btn-search" @click="search">
            <i class="fa fa-search"></i>
            <span>搜索</span>
          </button>
          <button class="btn btn-reset" @click="resetFilter">
            <i class="fa fa-refresh"></i>
            <span>重置</span>
          </button>
        </div>
      </div>

      <!-- 表格容器 -->
      <div class="table-container">
        <table class="data-table">
          <thead>
          <tr>
            <th>序号</th>
            <th>队伍名称</th>
            <th>中学名称</th>
            <th>活动批次</th>
            <th>提交时间</th>
            <th>材料类型</th>
            <th>审核状态</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(summary, index) in filteredSummaries" :key="summary.id">
            <td>{{ index + 1 + (currentPage - 1) * pageSize }}</td>
            <td>{{ summary.teamName }}</td>
            <td>{{ summary.schoolName }}</td>
            <td>{{ summary.batch }}</td>
            <td>{{ summary.submitTime }}</td>
            <td>{{ summary.type }}</td>
            <td>
                                    <span :class="getStatusClass(summary.status)">
                                        {{ getStatusText(summary.status) }}
                                    </span>
            </td>
            <td>
              <div class="action-buttons">
                <button class="btn btn-view" @click="viewSummary(summary.id)">
                  <i class="fa fa-eye"></i>
                  <span>查看</span>
                </button>
                <button class="btn btn-approve" @click="approveSummary(summary.id)">
                  <i class="fa fa-check"></i>
                  <span>通过</span>
                </button>
                <button class="btn btn-reject" @click="rejectSummary(summary.id)">
                  <i class="fa fa-times"></i>
                  <span>驳回</span>
                </button>
              </div>
            </td>
          </tr>
          <tr v-if="filteredSummaries.length === 0">
            <td colspan="8" style="text-align: center; padding: 30px;">
              <i class="fa fa-search-minus" style="margin-right: 8px;"></i>
              未找到匹配的总结数据
            </td>
          </tr>
          </tbody>
        </table>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <button class="page-btn" :disabled="currentPage === 1" @click="currentPage--">
          <i class="fa fa-angle-left"></i>
          <span>上一页</span>
        </button>
        <button v-for="page in totalPages" :key="page" class="page-btn"
                :class="{ 'active': page === currentPage }" @click="currentPage = page">
          {{ page }}
        </button>
        <button class="page-btn" :disabled="currentPage === totalPages" @click="currentPage++">
          <span>下一页</span>
          <i class="fa fa-angle-right"></i>
        </button>
      </div>
    </main>
  </div>

  <!-- 审核驳回模态框 -->
  <div class="modal" v-if="showRejectModal" @click="showRejectModal = false">
    <div class="modal-content" @click.stop>
      <div class="modal-header">
        <h3>审核驳回原因</h3>
        <button class="close-btn" @click="showRejectModal = false">&times;</button>
      </div>
      <div class="modal-body">
        <textarea v-model="rejectReason" rows="4" placeholder="请输入驳回原因..."></textarea>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" @click="showRejectModal = false">取消</button>
        <button class="btn btn-danger" @click="confirmReject">确认驳回</button>
      </div>
    </div>
  </div>
</div>

<!-- 引入交互逻辑 -->
<script src="js/summary-review.js"></script>
</body>
</html>